import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar } from "react-vant";
import { ShareO } from "@react-vant/icons";
import axios from "axios";
import "./index.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [kstab, setkstab] = useState<any>([]);
  const [AlldepartmentsInd, setAlldepartmentsInd] = useState(0);
  const render = () => {
    axios.get("/api/kstab").then((resp) => {
      setkstab(resp.data.kstab);
    });
  };
  useEffect(() => {
    render();
  }, []);
  const AlldepartmentsChange = (index: number) => {
    setAlldepartmentsInd(index);
  };
  const AlldepartmentsDetail = () => {
    navigate("/alldepartmentsitem");
  };
  return (
    <div>
      <NavBar title="科室选择" onClickLeft={() => navigate(-1)} />
      <div className="kstabbox">
        <div className="kstabboxleft">
          {kstab.length > 0 &&
            kstab.map((item: any, index: number) => (
              <div
                className={
                  index == AlldepartmentsInd ? "kstabboxleftactive" : ""
                }
                onClick={() => AlldepartmentsChange(index)}
              >
                {item.title}
              </div>
            ))}
        </div>
        <div className="kstabboxright">
          {kstab.length > 0 &&
            kstab[AlldepartmentsInd].children.word.map(
              (item: string, index: number) => (
                <div onClick={() => AlldepartmentsDetail()}>{item}</div>
              )
            )}
        </div>
      </div>
    </div>
  );
};
export default Index;
